<template>
    <div class="report1-container">
      <h2>菜品分析报表</h2>
      <el-divider />
  
      <!-- 图表类型选择 -->
      <div class="chart-type-selector">
        <el-radio-group v-model="selectedChartType" @change="updateChart">
          <el-radio label="sales-quantity-comparison">不同时间段菜品销售数量对比</el-radio>
          <el-radio label="average-price-distribution">不同菜品类型平均价格分布</el-radio>
        </el-radio-group>
      </div>
  
      <!-- 图表展示区域 -->
      <div class="chart-box">
        <h3>{{ getChartTitle(selectedChartType) }}</h3>
        <div id="chart" style="height: 300px;"></div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import * as echarts from 'echarts';
  
  // 初始化图表类型选择
  const selectedChartType = ref('sales-quantity-comparison');
  
  
  const salesQuantityComparisonData = {
    timePeriods: ['周一 - 周三', '周四 - 周六', '周日'],
    dishes: ['牛排', '披萨', '蔬菜沙拉'],
    data: [
      [120, 200, 150],
      [80, 70, 110],
      [130, 90, 100]
    ]
  };
  
  const averagePriceDistributionData = [
    { type: '主菜', averagePrice: 45 },
    { type: '主食', averagePrice: 30 },
    { type: '沙拉', averagePrice: 18 }
  ];
  
  const chart = ref(null);
  
  onMounted(() => {
    chart.value = echarts.init(document.getElementById('chart'));
    updateChart();
  });
  
  const updateChart = () => {
    let option;
    switch (selectedChartType.value) {
      case 'sales-quantity-comparison':
        option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          legend: {
            data: salesQuantityComparisonData.dishes
          },
          xAxis: [
            {
              type: 'category',
              data: salesQuantityComparisonData.timePeriods,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: salesQuantityComparisonData.dishes.map((dish, index) => ({
            name: dish,
            type: 'bar',
            data: salesQuantityComparisonData.data[index]
          }))
        };
        break;
      case 'average-price-distribution':
        option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} 元'
          },
          xAxis: {
            type: 'category',
            data: averagePriceDistributionData.map(item => item.type)
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '平均价格',
              type: 'bar',
              data: averagePriceDistributionData.map(item => item.averagePrice)
            }
          ]
        };
        break;
    }
    chart.value.setOption(option);
  };
  
  const getChartTitle = (type) => {
    switch (type) {
      case 'sales-quantity-comparison':
        return '不同时间段菜品销售数量对比';
      case 'average-price-distribution':
        return '不同菜品类型平均价格分布';
      default:
        return '';
    }
  };
  </script>
  
  <style scoped>
  .report1-container {
    padding: 20px;
  }
  
  h2 {
    text-align: center;
    margin-bottom: 10px;
  }
  
  .chart-type-selector {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
  }
  
  .chart-box {
    flex: 1;
    min-width: 300px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  
  .chart-box h3 {
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
    color: #606266;
  }
  </style>